<template>
	<view class="container">
		<text class="demo-title">示例一：基础轮播图 (Banner)</text>
		<!-- 
			indicator-dots: 显示面板指示点
			indicator-color: 指示点默认颜色
			indicator-active-color: 当前选中指示点的颜色
			autoplay: 自动切换
			interval: 自动切换的时间间隔 (毫秒)
			duration: 滑动动画的时长 (毫秒)
			circular: 开启衔接滑动（循环）
		-->
		<swiper class="basic-swiper" :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.4)"
			indicator-active-color="#FFFFFF" :autoplay="true" :interval="3000" :duration="500" :circular="true">
			<swiper-item class="item-a">
				<view class="swiper-item-content">
					<text class="item-text">页面 A</text>
				</view>
			</swiper-item>
			<swiper-item class="item-b">
				<view class="swiper-item-content">
					<text class="item-text">页面 B</text>
				</view>
			</swiper-item>
			<swiper-item class="item-c">
				<view class="swiper-item-content">
					<text class="item-text">页面 C (最后一页)</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style>
	.demo-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx;
	}

	.basic-swiper {
		height: 300rpx;
		/* swiper 必须有明确的高度 */
	}

	.swiper-item-content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-text {
		color: white;
		font-size: 40rpx;
	}

	.item-a {
		background-color: #67C23A;
	}

	.item-b {
		background-color: #409EFF;
	}

	.item-c {
		background-color: #9049DE;
	}
</style>